<template>
  <div id="app" class="bg-image-cover">
    <E-layout-container>
      <E-wraper-header slot="header" @onClick="onClick" />
      <E-nav-menu slot="nav-menu" :isCollapse="isCollapse" />
      <E-footer-control slot="footer" />
      <keep-alive slot="body" exclude="Page-search">
        <router-view />
      </keep-alive>
    </E-layout-container>
    <E-login v-if="showLogin" @close="showLogin=false" />
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      isCollapse: false,
      showLogin: false
    };
  },
  components: {
    ELayoutContainer: () => import('@/components/public/E-layout-container'),
    ENavMenu: () => import('@/components/public/E-nav-menu'),
    EWraperHeader: () => import('@/components/public/E-wraper-header'),
    EFooterControl: () => import('@/components/public/E-footer-control'),
    ELogin: () => import('@/components/public/E-login')
  },
  mounted() {
    this.updateLoginState();
  },
  methods: {
    ...mapActions('user', ['updateLoginState']),
    onClick(type, data) {
      console.log(type, data);
      if (type === 'nav_toggle') {
        this.isCollapse = !this.isCollapse;
      } else if (type === 'showLogin') {
        this.showLogin = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("http://p1.qhimg.com/bdm/0_0_100/t01a5211bae6d28520e.jpg");
  cursor: default;
  .E-login {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
  }
}
</style>
